<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>22001010431-曹鹏</title>
  
    <link rel="stylesheet" href="./css/caopeng.css">
    <link rel="stylesheet" href="./iconfonts/fonts/iconfont.css">
    <link rel="stylesheet" href="./css/video.css">
    <link rel="stylesheet" href="./iconfonts/icon/fonts/iconfont.css">
  
</head>

<body>
    <header class="cao-nav">
        <div class="cao-content">
            <div class="cao-left">
                <div class="cao-logo">
                    <span class="iconfont icon-tengxunshipin"></span>
                    <span class="cao-ten">腾讯视频</span>
                </div>
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">VIP会员</a></li>
                    <li><a href="#" class="cao-a">电视剧</a></li>
                    <li><a href="#">电影</a></li>
                    <li><a href="#">综艺</a></li>
                    <li><a href="#">动漫</a></li>
                    <li><a href="#">少儿</a></li>
                    <li><a href="#">全部</a></li>
                </ul>
            </div>
            <div class="cao-right">
                <div class="cao-search">
                    <form>
                        <input type="text" value="吞噬星空剧场版 血洛...">
                        <button type="submit" class="iconfont icon-sousuo" onclick="event.preventDefault(); doSearch();"></button>
                    </form>
                </div>
                <ul>
                    <li><a href="#" class="cao-VIP">
                            <p class="iconfont icon-vip1"></p>
                            <p>会员专区</p>
                        </a></li>
                    <li><a href="#">
                            <p class="iconfont icon-airudiantubiaohuizhi-zhuanqu_youxi"></p>
                            <p>游戏</p>
                        </a></li>
                    <li><a href="#">
                            <p class="iconfont icon-lishi"></p>
                            <p>历史</p>
                        </a></li>
                    <li><a href="#">
                            <p class="iconfont icon-video"></p>
                            <p>创作</p>
                        </a></li>
                    <li><a href="#">
                            <p class="iconfont icon-a-huaban1fuben10"></p>
                            <p>客户端</p>
                        </a></li>
                    <li><a href="#">
                            <img src="image/头像.png">
                        </a></li>
                </ul>
            </div>
        </div>
    </header>
    <article>
        <div class="cao-vContent">
            <div class="cao-vLeft">
                <img src="image/3.png">
            </div>
            <div class="cao-vRight">
                <div class="cao-vrc">
                    <div class="cao-info">
                        <div class="cao-details">
                            <img src="image/2.png" alt="">
                            <div class="cao-wenzi">
                                <div class="cao-capital">
                                    <h4>永夜星河</h4>
                                    <span>简介&gt;</span>
                                </div>
                                <p>21014 · 内地 · 2024 · 奇幻爱情</p>
                                <p>虞书欣 丁禹兮 祝绪丹 杨仕泽</p>
                                <p>全32集</p>
                            </div>
                        </div>
                        <p class="cao-infoP">会员看全集 · <a href="#">追剧日历</a> &gt;</p>
                        <div class="cao-mark">
                            <a href="#" class="iconfont icon-lishi"></a>
                            <a href="#" class="iconfont icon-xingxing"></a>
                            <a href="#" class="iconfont icon-airudiantubiaohuizhi-zhuanqu_youxi"></a>
                            <a href="#" class="iconfont icon-video"></a>
                        </div>
                    </div>
                    <div class="cao-privilege">
                        <div class="cao-pLeft">
                            <p>JUMP畅享7大权益</p>
                            <p>报名线下活动 看专属内容</p>
                        </div>
                        <div class="cao-pRight">年卡199元</div>
                    </div>
                    <div class="cao-drama">
                        <div class="cao-select">
                            <span class="cao-selected">剧集</span>
                            <span>团综</span>
                        </div>
                        <div class="cao-series">
                            <div>
                                <p id="rangeSelect1" class="cao-selected">1-30</p>
                                <p id="rangeSelect2">31-32</p>
                            </div>
                            <div class="cao-number-container">
                                <!-- 初始显示1-30的集数 -->
                                <div class="cao-number-box cao-selected">1</div>
                                <div class="cao-number-box">2</div>
                                <div class="cao-number-box">3</div>
                                <div class="cao-number-box">4</div>
                                <div class="cao-number-box">5</div>
                                <div class="cao-number-box">6</div>
                                <div class="cao-number-box">7</div>
                                <div class="cao-number-box">8</div>
                                <div class="cao-number-box">9</div>
                                <div class="cao-number-box">10</div>
                                <div class="cao-number-box">11</div>
                                <div class="cao-number-box">12</div>
                                <div class="cao-number-box">13</div>
                                <div class="cao-number-box">14</div>
                                <div class="cao-number-box">15</div>
                                <div class="cao-number-box">16</div>
                                <div class="cao-number-box">17</div>
                                <div class="cao-number-box">18</div>
                                <div class="cao-number-box">19</div>
                                <div class="cao-number-box">20</div>
                                <div class="cao-number-box">21</div>
                                <div class="cao-number-box">22</div>
                                <div class="cao-number-box">23</div>
                                <div class="cao-number-box">24</div>
                                <div class="cao-number-box">25</div>
                                <div class="cao-number-box">26</div>
                                <div class="cao-number-box">27</div>
                                <div class="cao-number-box">28</div>
                                <div class="cao-number-box">29</div>
                                <div class="cao-number-box">30</div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </article>
    <footer>
        <div class="cao-line">
            <hr size="3px" color="#ff5c38">
        </div>
        <div class="cao-footer">
            <div class="cao-links1">
                <dl>
                    <dt>特色推荐</dt>
                    <dd><a href="#">自制推荐</a></dd>
                    <dd><a href="#">杀毒软件</a></dd>
                </dl>
            </div>
            <div class="cao-links2">
                <h4>软件下载</h4>
                <div class="cao-icon">
                    <a href="https://v.qq.com/biu/download#iPhone">
                        <span class="iconfont icon-mobile"></span>
                        <p>手机版</p>
                    </a>
                </div>
                <div class="cao-icon">
                    <a href="https://v.qq.com/biu/download#Windows">
                        <span class="iconfont icon-windows"></span>
                        <p>Windows 版</p>
                    </a>
                </div>
                <div class="cao-icon">
                    <a href="https://v.qq.com/biu/download#Mac">
                        <span class="iconfont icon-mac"></span>
                        <p>Mac 版</p>
                    </a>
                </div>
                <div class="cao-icon">
                    <a href="https://v.qq.com/biu/download#Pad">
                        <span class="iconfont icon-ipad1"></span>
                        <p>iPad 版</p>
                    </a>
                </div>
                <div class="cao-icon">
                    <a href="https://v.qq.com/biu/download#TV">
                        <span class="iconfont icon-diannaoduan"></span>
                        <p>TV 版</p>
                    </a>
                </div>
            </div>
            <div class="cao-links3">
                <dl>
                    <dt>服务</dt>
                    <dd><a href="#">客服</a></dd>
                    <dd><a href="#">反馈</a></dd>
                    <dd><a href="#">侵权投诉</a></dd>
                    <dd><a href="#">免广告合作</a></dd>
                    <dd><a href="#">vip 采购</a></dd>
                </dl>
            </div>
        </div>
   
        <div class="cao-speak">
            <p>粤网文[2017]6138-1456 号 | 网络视听许可证 1904073 号 | 增值电信业务经营许可证:粤 B2-20090059 | 粤公网安备 44030002000001 号</p>
            <p>关于腾讯 | About Tencent | 服务条款 | 广告服务 | 腾讯招聘 | 客服中心 | 网站导航</p>
            <p>Copyright © 1998 - 2024 Tencent. All Rights Reserved.</p>
            <p>腾讯公司 版权所有</p>
        </div>

    </footer>
    <script>
        function bindEvents() {
            // 获取所有集数的盒子
            const numberBoxes = document.querySelectorAll('.cao-number-box');
            let textBox = null;
            
            numberBoxes.forEach(box => {
                box.addEventListener('click', function () {
                    if (this.textContent === '2') {
                        const textToShow = '死N次!妙妙偷换药遭慕声砍杀';
                        textBox = document.createElement('div');
                        textBox.classList.add('cao-text-box');
                        textBox.textContent = textToShow;
                        const boxRect = this.getBoundingClientRect();
                        // 设置文本框的位置
                        textBox.style.left = boxRect.left + 'px';
                        textBox.style.top = boxRect.top + boxRect.height + 10 + 'px';
                        document.body.appendChild(textBox);
                    }
                });
        
             
            });

            // 给整个文档添加点击事件处理函数
            document.addEventListener('click', function (event) {
                if (textBox &&!textBox.contains(event.target) &&!event.target.classList.contains('cao-number-box')) {
                    textBox.remove();
                    textBox = null;
                }
            });
        }

        // 给"1-30"添加点击事件
        const rangeSelect1 = document.getElementById('rangeSelect1');
        rangeSelect1.addEventListener('click', function () {
            const numberContainer = document.querySelector('.cao-number-container');
            numberContainer.innerHTML = '';
            for (let i = 1; i <= 30; i++) {
                const newNumberBox = document.createElement('div');
                newNumberBox.classList.add('cao-number-box');
                newNumberBox.textContent = i.toString();
                numberContainer.appendChild(newNumberBox);
            }
            bindEvents(); 
        });

        // 给"31-32"添加点击事件
        const rangeSelect2 = document.getElementById('rangeSelect2');
        rangeSelect2.addEventListener('click', function () {
            const numberContainer = document.querySelector('.cao-number-container');
            numberContainer.innerHTML = '';
            for (let i = 31; i <= 32; i++) {
                const newNumberBox = document.createElement('div');
                newNumberBox.classList.add('cao-number-box');
                newNumberBox.textContent = i.toString();
                numberContainer.appendChild(newNumberBox);
            }
            bindEvents(); // 重新绑定事件
        });

        // 初始绑定事件
        bindEvents();
    </script>
</body>

</html>